<template>
	<view v-if="showStatus && hasRing" class="line_status">
		<view class="tip_guid" @click="toHelp">
			<uni-icons v-if="showIcon" :type="icon" :class="['normal', icon, statusType]" size="12" color="black"></uni-icons>
			<text class="statusText" :class="[statusType]">{{ statusText }}</text>
			{{ showTip ? "请检查戒指是否有电" : "" }}
			<!-- <text v-if="showGuid" class="guid" @click="toHelp">查看连接指南</text> -->
		</view>
	</view>
</template>
<script>
// import store from "@/store/index.js";
import { mapGetters, mapState } from "vuex";
import { SEARCH_STATUS, BLUETOOTH_STATUS, BLUETOOTH_STATUS_DESC, SEARCH_STATUS_DESC } from "@/store/BluetoothManager.js";
// @type {{UNINITIALIZED: number, INITIALIZED: number, INITFAILED: number, SEARCH: number, UNCONNECTED: number, CONNECTING: number, CONNECTED: number, NOTFOUND: number, TIMEOUT: number, DISCONNECTED: number}}
// {{UNSEARCH: number, SEARCHING: number, FOUND: number, NOTFOUND: number}}

export default {
	data() {
		return {
			statusText: "",
			statusType: "",
			showStatus: false,
			showTip: false,
			showGuid: false,
			showIcon: false,
			icon: "",
		};
	},

	computed: {
		...mapGetters("bleManage", ["searchStatus", "bluetoothState", "linkComplete", "getAvailable"]),
		...mapState("ringDataManage", ["ring"]),

		hasRing() {
			return this.ring.mac
		},

		status() {
			return [this.bluetoothState, this.searchStatus, this.getAvailable, this.linkComplete];
		},
	},

	watch: {
		status([blue, search, available, linkComplete]) {
			// blue整体蓝牙状态； search搜索状态； link是否连接完成； available是否可用
            console.log('blue link status  蓝牙状态 => ',  BLUETOOTH_STATUS_DESC[blue] , '搜索状态 => ', SEARCH_STATUS_DESC[search]);
            
			this.statusText = "";
			this.showStatus = false;
			this.showGuid = false;
			this.showIcon = false;
			this.showTip = false;

			if (blue === BLUETOOTH_STATUS.UNINITIALIZED || blue === BLUETOOTH_STATUS.INITIALIZED) {
				this.statusText = "";
				this.showStatus = false;
				this.icon = "";
			} else if (blue === BLUETOOTH_STATUS.INITFAILED) {
				this.statusText = "蓝牙未开启！";
				this.showStatus = true;
				this.showGuid = true;
			} else if (blue === BLUETOOTH_STATUS.SEARCH) {
				this.icon = "search";
				if (search === SEARCH_STATUS.SEARCHING) {
					this.statusText = "搜索中...";
					this.showStatus = true;
					this.showGuid = true;
				} else if (search === SEARCH_STATUS.NOTFOUND) {
					this.statusText = "搜索超时！";
					this.showStatus = true;
					this.showTip = true;
					this.showGuid = true;
				}
			} else if (blue === BLUETOOTH_STATUS.CONNECTING) {
				this.statusText = "连接中";
				this.showStatus = true;
				this.showIcon = true;
				this.icon = "link";
			} else if (blue === BLUETOOTH_STATUS.CONNECTED && linkComplete) {
				this.statusText = "连接成功";
				this.showStatus = true;
				this.statusType = "success";
				this.showIcon = true;
				this.icon = "checkmarkempty";

				setTimeout(() => {
					this.showStatus = false;
				}, 2000);
			} else if (blue === BLUETOOTH_STATUS.CONNECTED && !linkComplete) {
				this.statusText = "连接中";
				this.showStatus = true;
				this.showIcon = true;
				this.icon = "link";
			}else if (blue === BLUETOOTH_STATUS.TIMEOUT) {
				this.statusText = "连接超时";
				this.showStatus = true;
				this.showTip = true;
				this.showGuid = true;
				this.icon = "link";
			} else if (blue === BLUETOOTH_STATUS.DISCONNECTED || blue === BLUETOOTH_STATUS.MANUAL) {
				this.statusText = "连接已断开";
				this.showStatus = true;
				this.showTip = true;
				this.showGuid = true;
				this.icon = "link";
			} else {
				this.statusText = "";
				this.showStatus = false;
				this.showGuid = false;
			}
			const avs = available.slice(-1);
			if (avs[0] === false) {
				this.statusText = "蓝牙已关闭！";
				this.showStatus = true;
				this.showGuid = true;
			}

			console.log('BLUETOOTH_STATUS.CONNECTED && !this.linkComplete', blue, linkComplete);
			
		},
	},

	methods: {
		toHelp() {},
	},
};
</script>

<style lang="scss" scoped>
.line_status {
	width: 100%;
	padding: 16rpx 32rpx;
	background-color: #d1e8f8;

	display: flex;
	justify-content: center;
	align-items: center;

	.normal {
		margin-right: 5rpx;

		&.search {
			animation: moveUpDown 2s infinite;
		}

		&.link {
			animation: hideShow 2s infinite;
			transform: rotate(-45deg);
		}

		@keyframes moveUpDown {
			0% {
				transform: translateY(0);
			}

			25% {
				transform: translateY(-2rpx);
				/* 上移5px */
			}

			50% {
				transform: translateY(0);
				/* 回到原位 */
			}

			75% {
				transform: translateY(2rpx);
				/* 下移5px */
			}

			100% {
				transform: translateY(0);
				/* 回到原位 */
			}
		}

		@keyframes hideShow {
			0% {
				opacity: 1;
				/* 开始时完全不透明 */
			}

			50% {
				opacity: 0;
				/* 中间时完全透明 */
			}

			100% {
				opacity: 1;
				/* 结束时再次完全不透明 */
			}
		}
	}

	text {
		font-size: 24rpx;
		font-weight: 400;
		text-align: left;
		color: black;
		display: inline-block;
	}

	.statusText {
		white-space: pre;
		margin-right: 10rpx;
	}

	.tip_guid {
		font-size: 24rpx;
		font-weight: 400;
		text-align: center;
		color: black;

		margin-left: 10rpx;
		flex: 0 0 auto;
		width: 65%;
		// display: flex;
		// justify-content: center;
		// align-items: center;
	}

	.success {
		// color: rgba(169, 205, 172, 1);
		color: rgba(45, 153, 255, 1);
	}

	.guid {
		color: rgba(45, 153, 255, 1);
		font-size: 24rpx;
		font-weight: 400;
		text-align: left;
	}
}
</style>
